<!DOCTYPE html>
<html>

<head lang='zh'>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="renderer" content="webkit"/>
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0"/>
    <title>websocket--luckysheet</title>

<!--    <link rel='stylesheet' href='/lib/plugins/css/pluginsCss.css'/>-->
<!--    <link rel='stylesheet' href='/lib/plugins/plugins.css'/>-->
<!--    <link rel='stylesheet' href='/lib/css/luckysheet.css'/>-->
<!--    <link rel='stylesheet' href='/lib/assets/iconfont/iconfont.css'/>-->
<!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->

<!--    <script src="/lib/plugins/js/plugin.js"></script>-->
<!--    <script src="/lib/luckysheet.umd.js"></script>-->

    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css' />
    <script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>

    <link rel='stylesheet' href='/css/h-ui/H-ui.css'/>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus@2.4.2/dist/index.css" />
    <script src="//cdn.jsdelivr.net/npm/vue@3"></script>
    <script src="//cdn.jsdelivr.net/npm/element-plus@2.4.2"></script>
    <script src="//cdn.jsdelivr.net/npm/@element-plus/icons-vue@1.1.4"></script>
    <script src="//cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/dayjs@1.11.10/dayjs.min.js"></script>

</head>

<body>
<div id="app">
    <el-container>
        <el-header>
            <div class="luckysheet_info_detail">
<!--                    <el-button @click="incrementCount">{{ message }}{{counter}}</el-button>-->
                <div class="luckysheet_info_detail_left">
                    <el-icon :size="20"><home-filled /></el-icon>
                    <el-dropdown>
                        <span class="el-dropdown-link">
                          <el-icon :size="12" class="el-icon--right">
                            <caret-bottom />
                          </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>Action 1</el-dropdown-item>
                                <el-dropdown-item>Action 2</el-dropdown-item>
                                <el-dropdown-item>Action 3</el-dropdown-item>
                                <el-dropdown-item disabled>Action 4</el-dropdown-item>
                                <el-dropdown-item divided>Action 5</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
                <div class="sheet-name">
<!--                    <input id="luckysheet_info_detail_input__new" class="luckysheet_info_detail_input" style="visibility: visible;" oninput="adjustWidth()" onblur="setWorkbookName()">-->
                    <input class="luckysheet_info_detail_input" style="visibility: visible;" v-model="sheetName" ref="inputel" @blur="setWorkbookName" @input="adjustWidth" />
                </div>
                <div class="luckysheet_info_detail_left">
                    <el-icon><star /></el-icon>
                </div>
                <div class="luckysheet_info_detail_left">
                    <el-icon><document-add /></el-icon>
                </div>
                <div class="luckysheet_info_detail_update"> {{message}} {{detailUpdate}} </div>
                <div class="luckysheet_info_detail_avatar">
                    <div>
                        <el-avatar :icon="user-filled" />
                    </div>
                    <div>
                        <el-avatar
                                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                        />
                    </div>
                    <div>
                        <el-avatar> user </el-avatar>
                    </div>
                </div>
                <div class="luckysheet_info_detail_avatar_drop">
                    <el-dropdown>
                        <span class="el-dropdown-link">
                          <el-icon :size="12" class="el-icon--right">
                            <caret-bottom />
                          </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>Action 1</el-dropdown-item>
                                <el-dropdown-item>Action 2</el-dropdown-item>
                                <el-dropdown-item>Action 3</el-dropdown-item>
                                <el-dropdown-item disabled>Action 4</el-dropdown-item>
                                <el-dropdown-item divided>Action 5</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
                <div class="luckysheet_info_detail_his">
                    <el-dropdown @command="handleDrawer">
                        <el-button plain type="primary">
                            更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
                        </el-button>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>Action 1</el-dropdown-item>
                                <el-dropdown-item>Action 2</el-dropdown-item>
                                <el-dropdown-item>Action 3</el-dropdown-item>
                                <el-dropdown-item>Action 4</el-dropdown-item>
                                <el-dropdown-item>Action 5</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
                <div class="luckysheet_info_detail_right">
                     <span id="luckysheet_info_detail_user">我的</span>
                </div>
            </div>
        </el-header>
        <el-main style="height: calc(100vh - 60px);  overflow: hidden;">
            <div id="${wb.option.container}"
                 style="margin:0px;padding:0px;width:100%;height:100%;"></div>
        </el-main>
        <el-drawer v-model="drawer" title="修订记录">
            <el-timeline>
                <el-timeline-item
                        v-for="(activity, index) in activities"
                        :key="index"
                        :icon="activity.icon"
                        :type="activity.type"
                        :color="activity.color"
                        :size="activity.size"
                        :hollow="activity.hollow"
                        :timestamp="activity.updatetimeFormatted"
                >
                   第{{ activity.ver }}版
                </el-timeline-item>
            </el-timeline>
        </el-drawer>
    </el-container>
</div>
</body>

<script>
    var localurl = "//" + window.location.host;

    const app = Vue.createApp({
        data() {
            return {
                wbId: "${wb.id}",
                message: '',
                detailUpdate: '',
                drawer: false,
                activities: [],
                sheetName: ''
            };
        },
        mounted() {
            // 在组件挂载后执行onMounted钩子函数
            console.log('Component mounted!');
            // this.handleMounted()
            this.init()
        },
        methods: {
            init(){
                const _this = this;

                // 配置项
                const options = {
                    container: "${wb.option.container}", // 设定DOM容器的id
                    title: "", // 设定表格名称
                    lang: "${wb.option.lang}",
                    allowUpdate: true,
                    showinfobar: false,
                    loadUrl: window.location.protocol + localurl + "/load/${wb.id}",
                    loadSheetUrl: window.location.protocol + localurl + "/loadSheet/${wb.id}",
                    updateUrl: "ws://" + localurl + "/ws/" + Math.round(Math.random() * 100) + "/${wb.id}",
                    // 更多其他设置...
                    hook: {
                        workbookCreateAfter: function (json) {
                            // $('.luckysheet_info_detail_input').val("${wb.name}")
                            // $('.luckysheet_info_detail_input').on('input', function() {
                            //     _this.adjustWidth($(this).get(0));
                            // });
                            // $('.luckysheet_info_detail_input').on('blur', function() {
                            //     _this.setWorkbookName($(this).get(0));
                            // });
                            // _this.adjustWidth($('.luckysheet_info_detail_input').get(0));

                            _this.sheetName = '${wb.name}'
                            _this.adjustWidth()
                            console.info('===>workbookCreateAfter', json)
                        },
                        updated: function(operate) {
                            console.log('===>updated：', operate)
                            $('.luckysheet_info_detail_update').html('已自动保存')
                            setTimeout(() => {
                                $('.luckysheet_info_detail_update').html('最近保存'+ dayjs().format('H时m分'));
                            }, 1000);
                        }
                    }
                }

                // 初始化表格
                luckysheet.create(options)
            },
            async handleMounted() {
                console.log('Component mounted!', luckysheet.title);

                const res = await this.requestHistory();
                if(res.status === 200 && res.data.length > 0){
                    const updateTime = res.data[0].updateTime;
                    this.message = "上次修改是在"+ dayjs(updateTime).format('M月D日') +"进行的";
                }
                else{
                    this.message = "所有编辑内容都会自动保存";
                }
            },
            async requestHistory(){
                console.log("===>:requestHistory", this.wbId);
                const historyUrl = window.location.protocol + localurl + "/loadHis/" + this.wbId;
                const res = await axios.get(historyUrl);
                return res;
            },
            async handleDrawer() {
                const res = await this.requestHistory();
                if(res.status === 200 && res.data.length > 0){
                    this.activities = res.data;
                    // 格式化时间字段
                    this.activities.forEach(item => {
                        const timestamp = dayjs(item.updateTime).valueOf(); // 转换为时间戳
                        const formattedTime = dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss'); // 格式化为XX时XX分
                        item.updatetimeFormatted = formattedTime; // 添加格式化后的时间字段到数据对象中
                    });
                }
                this.drawer = true;
            },
            async setWorkbookName(){
                const input = this.$refs["inputel"];
                const data = {
                    name: input.value,
                };
                const updateUrl = window.location.protocol + localurl + "/update/" + this.wbId;
                const res = await axios.post(updateUrl, data);
                return res;
            },
            adjustWidth() {
                const input = this.$refs["inputel"];
                const maxWidth = 480; // 最大宽度
                if (this.sheetName.length > 10) { // 根据需要调整条件
                    input.style.width = this.sheetName.length + 'ch';
                    if(input.style.width > maxWidth)
                        input.style.width = maxWidth + "px";
                } else {
                    input.style.width = "100px"; // 最小宽度
                }
            },

        },
    });
    for ([name, comp] of Object.entries(ElementPlusIconsVue)) {
        app.component(name, comp);
    }
    app.use(ElementPlus);
    app.mount("#app");
</script>

<style>
.el-header {
    --el-header-padding: 0;
}
.el-main {
    --el-main-padding: 0;
}
.el-avatar {
    --el-avatar-size: 30px;
}
.luckysheet_info_detail {
    justify-content: flex-end;
}
.luckysheet_info_detail_left {
    margin-right: 0;
    display: flex;
    align-items: center;
    padding-right: 10px;
}
.sheet-name {
    margin: 0 !important;
    border-left: 1px solid var(--el-border-color-dark);
    padding: 0 10px;
}
.sheet-name > input {
    min-width: 100px;
    max-width: 480px;
}
.luckysheet_info_detail_update {
    margin-right: auto;
    margin-left: 0;
    line-height: 1;
}
.luckysheet_info_detail_avatar {
    display: flex;
}
.luckysheet_info_detail_avatar> div {
    margin-left: -15px;
}
.luckysheet_info_detail_avatar_drop {
    line-height: 1;
    padding-right: 10px;
}
.luckysheet_info_detail_his {
    border-left: 1px solid var(--el-border-color-dark);
    padding: 0 10px;
    line-height: 1;
}

</style>
</html>
